<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
	<title></title>
	<style>
		
	</style>
</head>
<body>
	<div id="uiwm-threadview" style="height:680px;"></div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script type="text/javascript" src="../../js/utils/echarts3/echarts.min.js" ></script>
	<script>
		var userID,companyID,articleID,relationType,articleUserID;
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			articleID = base.getParameter("articleID");
			relationType = base.getParameter("relationType");
			articleUserID = base.getParameter("articleUserID");
			if (articleUserID != null && articleUserID != "") {
				userID = articleUserID;
			}
			//获取文章信息
			base.postData(base.url.relationMap, {userID:userID,companyID:companyID,articleID:articleID,relationType:relationType}, callbackRelationMap);
		});
		function callbackRelationMap(data) {
			if (data.success) {
				var myChart = echarts.init(document.getElementById('uiwm-threadview'));
				var graph = data.context.dataPacket;
			    var categories = [];
			    var max = 0;
			    graph.nodes.forEach(function (node) {
			    		node["label"] = node.name;
			        node.name = node.id;
			        if(node.category>max){
	                    max = node.category;
	                }
			    });
			    for (var i = 0; i <= max; i++) {
	                categories[i] = {
	                    name: '层级'+i
	                };
	            }
	            var option = {
	                title : {
	                    text : '脉络图',
	                    subtext : '只能看到16级',
	                    x : 'right',
	                    y : 'bottom'
	                },
	
	                legend : {
	                    x : 'center',
	                    data :categories.map(function (a) {
				                return a.name;
				            })
	                },
	                series : [ {
	                    type : 'force',
	                    name : "传播路径",
	                    ribbonType : false,
	                    categories : categories,
	                    itemStyle : {
	                        normal : {
	                            label : {
	                                show : true,
	                                textStyle : {
	                                    color : '#333'
	                                }
	                            },
	                            nodeStyle : {
	                                brushType : 'both',
	                                borderColor : 'rgba(255,215,0,0.5)',
	                                borderWidth : 1
	                            },
	                            linkStyle : {
	                                type : 'curve'
	                            }
	                        },
	                        emphasis : {
	                            label : {
	                                show : false
	                                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
	                            },
	                            nodeStyle : {
	                                //r: 30
	                            },
	                            linkStyle : {}
	                        }
	                    },
	                    useWorker : false,
	                    minRadius : 15,
	                    maxRadius : 35,
	                    gravity : 1.1,
	                    scaling : 1.1,
	                    roam : 'move',
	                    nodes : graph.nodes,
	                    links : graph.links
	                } ]
	            };
	            myChart.setOption(option);
	            myChart.on('click', function (params) {
				    var _customerID = params.data.id;
				    if($(window).width()<768){
				   	 	window.parent.parent.location = "../index.html?path=myClient/clientDetailsPhone.html?customerID="+_customerID+"&articleID="+articleID;
					}else{
						window.parent.parent.location = "../index.html?path=myClient/clientDetails.html?customerID="+_customerID;
					}
					
				});
			}
		}
	</script>
</body>
</html>
